import defaultImg from '@/assets/images/200.png'
export default {
  // 图片懒加载
  lazy: {
    // vue3的指令声明周期和组件的声明周期一样
    mounted (el, binding) {
      // 创建一个观察对象,来观察当前使用指令的元素
      const observer = new IntersectionObserver(
        ([{ isIntersecting }]) => {
          if (isIntersecting) {
            // 停止观察
            observer.unobserve(el)
            // 图片加载错误事件,设置默认图片
            el.onerror = () => {
              el.src = defaultImg
            }
            // 设置图片懒加载的图片
            el.src = binding.value
          }
        },
        {
          // 交互的比例
          threshold: 0.01
        }
      )
      // 开启观察
      observer.observe(el)
    }
  }
}
